<!-- 月度统计页面 -->
<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="月份" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          type="month"
          value-format="yyyy-MM-dd HH:mm:ss"
          :clearable="false"
          placeholder="选择月份"
          @change="getList">
        </el-date-picker>
      </el-form-item>
    </el-form>

    <!-- 月订单数量 折线图 -->
    <OrderCount :month="queryParams.createTime" />

    <!-- 收入支出 柱状图 -->
    <!-- <barChart :chartData="barChartData" style="margin: 10px 0 50px 0;"></barChart> -->

    <!-- 利润 折线图 -->
    <!-- <lineChart :chartData="lineChartData" style="margin-bottom: 50px;"></lineChart> -->

    <!-- 流水 饼图 -->
    <!-- <twsPieChart :chartData="pie1ChartData" style="display: inline-block; width: 45%;"></twsPieChart> -->
    <!-- <twsPieChart :chartData="pie2ChartData" style="display: inline-block; width: 45%;"></twsPieChart> -->

  </div>
</template>

<script>
import OrderCount from "@/views/dashboard/OrderCount";
import barChart from "./sub/BarChart";
import lineChart from "./sub/LineChart";
import twsPieChart from "./sub/TwsPieChart";
import { getNowTime, getCountDays } from "@/utils/date";
import { accSub } from "@/utils/func";

export default {
  components: {
    OrderCount,
    barChart,
    lineChart,
    twsPieChart,
  },
  data() {
    return {
      month: '',
      // 柱状图数据
      barChartData: {
        // 图表标题
        title: '收入支出统计图',
        // X轴每一个点的名称
        xName: [],
        // X轴名称
        xLabel: '',
        // X轴数据
        xData: [{
          name: '收入',
          data: []
        }, {
          name: '支出',
          data: []
        }],
        // Y轴名称
        yLabel: '单位：元'
      },
      // 折线图数据
      lineChartData: {
        title: '利润统计图',
        // X轴每一个点的名称
        xName: [],
        // X轴名称
        xLabel: '',
        // X轴数据
        xData: [{ name: '', data: [] }],
        // Y轴名称
        yLabel: '单位：元'
      },
      // 饼状图1数据
      pie1ChartData: {
        // 图表标题
        title: '收入流水统计图(单位：元)',
        pieData: [{ value: -1, name: '' }]
      },
      // 饼状图2数据
      pie2ChartData: {
        // 图表标题
        title: '支出流水统计图(单位：元)',
        pieData: [{ value: -1, name: '' }]
      },
      // 查询参数
      queryParams: {
        createTime: null
      },
      // 当前月的天数
      days: 0,
      // 所有流水类型
      flowTypeList: []
    };
  },
  created() {
    // 获取当前月份
    this.queryParams.createTime = getNowTime();
  },
  methods: {
    getList() {
      // this.getInOutChartList()
      // this.getFlowTypeChartList()
    },
    /** 查询收入支出统计 柱状图 */
    getInOutChartList() {
      inOutChart(this.queryParams).then(response => {
        var inOutList = response.data;
        this.barChartData.xData = [{
          name: '收入',
          data: new Array(this.days).fill(0)
        }, {
          name: '支出',
          data: new Array(this.days).fill(0)
        }];
        this.barChartData.xName = []
        for(var i = 0; i < this.days; i++) {
          this.barChartData.xName.push((i + 1) + '号');
        }
        inOutList.forEach(el => {
          this.barChartData.xData[el.flag - 1].data[new Date(el.createTime).getDate() - 1] = el.amount;
        });
        // 计算利润
        this.getLR()
      });
    },
    /** 计算利润 折线图 */
    getLR() {
      this.lineChartData.xData = [{ name: '', data: new Array(this.days).fill(0) }]
      this.lineChartData.xName = []
      for(var i = 0; i < this.days; i++) {
        this.lineChartData.xName.push((i + 1) + '号');
      }
      // 每天利润 = 每天收入 - 每天支出
      this.barChartData.xData[0].data.forEach((el, index) => {
        this.lineChartData.xData[0].data[index] = accSub(this.barChartData.xData[0].data[index], this.barChartData.xData[1].data[index])
      })
    },
    /** 查询流水统计 饼图 */
    getFlowTypeChartList() {
      flowTypeChart(this.queryParams).then(response => {
        var flowTypeList = response.data;
        this.pie1ChartData.pieData = []
        this.pie2ChartData.pieData = []
        flowTypeList.forEach(el => {
          // 收入
          if(el.flag == 1) {
            let pie1 = {value: el.amount, name: this.getFlowType(el.flowType)}
            this.pie1ChartData.pieData.push(pie1)
            // 支出
          } else if(el.flag == 2) {
            let pie2 = {value: el.amount, name: this.getFlowType(el.flowType)}
            this.pie2ChartData.pieData.push(pie2)
          }
        })
        if(this.pie1ChartData.pieData.length == 0) {
          this.pie1ChartData.pieData = [{value: -1, name: ''}]
        }
        if(this.pie2ChartData.pieData.length == 0) {
          this.pie2ChartData.pieData = [{value: -1, name: ''}]
        }
      })
    },
    // 流水类型翻译
    getFlowType(flowType) {
      const flowT = this.flowTypeList.find(item => item.id == flowType);
      if (flowT) {
        return flowT.name
      } else {
        return flowType
      }
    }
  }
};
</script>
